import React, { useState } from'react';
import './qjx_yi.css'
import { LeftOutline, RightOutline } from 'antd-mobile-icons'
import { useNavigate } from "react-router-dom";
const FeedbackForm = () => {
  const [selectedType, setSelectedType] = useState('健康');
  const [description, setDescription] = useState('');
  const [uploadedImages, setUploadedImages] = useState([]);

  const handleTypeChange = (type) => {
    setSelectedType(type);
  };

  const handleDescriptionChange = (e) => {
    setDescription(e.target.value);
  };

  const handleImageUpload = (e) => {
    const files = Array.from(e.target.files);
    setUploadedImages([...uploadedImages,...files]);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 在这里处理表单提交逻辑，例如发送数据到服务器
    console.log('提交的反馈:', {
      type: selectedType,
      description,
      images: uploadedImages
    });
  };
const navigate = useNavigate();
  return (
    <div>
        <div className='y_one'>
                <p style={{
                    marginTop: '5px'
                }} onClick={() => navigate('/home/mind')}><LeftOutline fontSize={24} /></p>
                <h2>意见反馈</h2>
            </div>
        <form onSubmit={handleSubmit} className="qj_form">
      <div>
        <label>(必选) 请选择您反馈的问题类型</label>
        <div className="qj_type-buttons">
          <button
            type="button"
            className={selectedType === '健康'? 'qj_active' : ''}
            onClick={() => handleTypeChange('健康')}
          >
            健康
          </button>
          <button
            type="button"
            className={selectedType === '挂号'? 'qj_active' : ''}
            onClick={() => handleTypeChange('挂号')}
          >
            挂号
          </button>
          <button
            type="button"
            className={selectedType === '体检'? 'qj_active' : ''}
            onClick={() => handleTypeChange('体检')}
          >
            体检
          </button>
          <button
            type="button"
            className={selectedType === '问诊'? 'qj_active' : ''}
            onClick={() => handleTypeChange('问诊')}
          >
            问诊
          </button>
          <button
            type="button"
            className={selectedType === '商城'? 'qj_active' : ''}
            onClick={() => handleTypeChange('商城')}
          >
            商城
          </button>
          <button
            type="button"
            className={selectedType === '活动'? 'qj_active' : ''}
            onClick={() => handleTypeChange('活动')}
          >
            活动
          </button>
          <button
            type="button"
            className={selectedType === '其它'? 'qj_active' : ''}
            onClick={() => handleTypeChange('其它')}
          >
            其它
          </button>
        </div>
      </div>
      <div>
        <label>请描述您遇到的具体问题 (不少于10个字)</label>
        <textarea
          value={description}
          onChange={handleDescriptionChange}
          minLength={10}
          maxLength={200}
          placeholder="请在此输入具体问题"
          className="qj_description-textarea"
        />
        <div className="qj_character-count">{description.length}/200</div>
      </div>
      <div>
        <label>若能提供相应问题的截图就更好了</label>
        <div className="qj_image-upload-container">
          {uploadedImages.map((image, index) => (
            <div key={index} className="qj_uploaded-image">
              <img src={URL.createObjectURL(image)} alt={`Uploaded ${index}`} />
              <button
                type="button"
                onClick={() => {
                  setUploadedImages(uploadedImages.filter((_, i) => i!== index));
                }}
              >
                -
              </button>
            </div>
          ))}
          <input
            type="file"
            multiple
            onChange={handleImageUpload}
            className="qj_upload-button"
          />
          <div className="qj_image-count">{uploadedImages.length}/3</div>
        </div>
      </div>
      <button type="submit" className="qj_submit-button">提交</button>
    </form>
    </div>
  );
};

export default FeedbackForm;